import React from 'react';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Input, Button, Divider } from 'antd';

const FormItem = Form.Item;
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listIndex: 0,
      contactList: [],
      isRequiredForm: [true],
    };
  }

  componentDidMount = () => {
    this.add();
  };

  // 新增数据
  add = () => {
    const { contactList, listIndex, isRequiredForm } = this.state;
    const newData = contactList.map(item => ({ ...item }));
    newData.push({
      id: `list_${listIndex}`,
      isRequired: true,
      name: '姓名',
      position: '职位',
      email: '邮箱',
      phoneNo: '手机号码',
      tel: '固定电话',
      remark: '备注',
    });
    this.state.listIndex += 1;
    const cRequiredForm = isRequiredForm;
    cRequiredForm.push(true);
    this.setState({ contactList: newData, isRequiredForm: cRequiredForm });
  };

  // 删除数据
  delList = id => {
    const { contactList } = this.state;
    const newData = contactList.filter(item => item.id !== id);
    this.setState({ contactList: newData });
  };

  render() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const { contactList } = this.state;
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    // 下拉选项
    return (
      <Form layout="vertical">
        {contactList.map((contactData, index) => (
          <div key={contactData.id}>
            {index ? <Divider /> : ''}
            <Row gutter={64}>
              <Col {...colProps}>
                <FormItem label={contactData.name}>
                  {getFieldDecorator(`name_${contactData.id}`, {
                    rules: [{ required: contactData.isRequired, message: '请输入' }],
                  })(<Input placeholder="请输入" maxLength="30" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={contactData.position}>
                  {getFieldDecorator(`position_${contactData.id}`, {
                    rules: [{ required: contactData.isRequired, message: '请输入' }],
                  })(<Input placeholder="请输入" maxLength="50" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={contactData.email}>
                  {getFieldDecorator(`email_${contactData.id}`, {
                    rules: [
                      { required: contactData.isRequired, type: 'email', message: '应为邮箱格式' },
                    ],
                  })(<Input placeholder="请输入" maxLength="50" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={contactData.phoneNo}>
                  {getFieldDecorator(`phoneNo_${contactData.id}`, {
                    rules: [
                      {
                        required: contactData.isRequired,
                        message: '应为11位手机号码',
                        pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                      },
                    ],
                  })(<Input placeholder="请输入" maxLength="12" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={contactData.tel}>
                  {getFieldDecorator(`tel_${contactData.id}`, {
                    rules: [
                      {
                        required: false,
                        message: '固话或手机',
                        pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                      },
                    ],
                  })(<Input placeholder="请输入" maxLength="12" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={contactData.remark}>
                  {getFieldDecorator(`remark_${contactData.id}`, {
                    rules: [{ required: false, message: '请输入' }],
                  })(<Input placeholder="请输入" maxLength="200" />)}
                </FormItem>
              </Col>
              {index > 0 && (
                <Col
                  xl={{ span: 8 }}
                  lg={{ span: 8 }}
                  md={{ span: 8 }}
                  sm={24}
                  style={{ textAlign: 'center' }}
                >
                  <DeleteOutlined
                    className="dynamic-delete-button"
                    style={{ fontSize: '20px', lineHeight: '85px' }}
                    onClick={() => this.delList(contactData.id)} />
                </Col>
              )}
            </Row>
          </div>
        ))}
        <Button
          style={{ width: '100%', marginBottom: 8 }}
          type="dashed"
          icon={<PlusOutlined />}
          onClick={this.add}
        >
          新增联系人
        </Button>
      </Form>
    );
  }
}
const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
